<template>
    <view class="content">
        <view class="top">
            <view :class="chooseType == 'gz' ?'top-tab-active':''" class="top-tab" @click="qiehuan('gz')">
                关注
                <view v-if="chooseType == 'gz'" class="top-tab-active-btm"></view>
            </view>
            <view :class="chooseType == 'fs' ?'top-tab-active':''" class="top-tab" @click="qiehuan('fs')">
                粉丝
                <view v-if="chooseType == 'fs'" class="top-tab-active-btm"></view>
            </view>
        </view>
        
       
        
        
        <view class="list" v-for="(num,index) in data" :key="index">
            
            <view class="list-box">
                <view class="list-box-o">
                    <image class="list-box-tx" src="https://mes.renkangshangcheng.cn/appimage/bz.png"></image>
                </view>
                <view class="list-box-info">
                   <view class="list-info-name">大刘</view>
                    <view class="list-info-identity">太原市乐华店店长</view>
                </view>
                <view class="list-box-gz">
                    已关注
                </view>
            </view>
            
        </view>
        <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
        
        
    </view>
</template>

<script>
    export default {
    	components: {},
    	data() {
    		return {
    			chooseType:'gz',                
                data: [],
                loadMoreText: "加载中...",
                showLoadMore: false,
                max: 0
    		};
    	},
        onLoad() {
        	this.initData();
        },
        onUnload() {
        	this.max = 0,
        	this.data = [],
        	this.loadMoreText = "加载更多",
        	this.showLoadMore = false;
        },
        // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
        onReachBottom() {
        	if (this.max > 40) {
        		this.loadMoreText = "没有更多数据了!"
        		return;
        	}
        	this.showLoadMore = true;
        	setTimeout(() => {
        		this.setListData();
        	}, 300);
        },
        // 监听用户下拉动作，一般用于下拉刷新
        onPullDownRefresh() {
        	this.initData();
        },
    	methods: {
            qiehuan(type) {
                this.chooseType = type;
            },
            initData(){
            	setTimeout(() => {
            		this.max = 0;
            		this.data = [];
            		let data = [];
            		this.max += 20;
            		for (var i = this.max - 19; i < this.max + 1; i++) {
            			data.push(i)
            		}
            		this.data = this.data.concat(data);
            		uni.stopPullDownRefresh(); // 结束下拉刷新
            	}, 300);
            },
            setListData() {
            	let data = [];
            	this.max += 10;
            	for (var i = this.max - 9; i < this.max + 1; i++) {
            		data.push(i)
            	}
            	this.data = this.data.concat(data);
            }
    	}
    };
</script>

<style>
.content {
    width: 750upx;
}
.top {
    width: 750upx;
    height: 88upx;
    display: flex;
}
.top-tab {
    flex: 1;
    text-align: center;
    line-height: 88upx;
    color:#666666;
}
.top-tab-active {
    color:#FF4336;
}
.top-tab-active-btm {
    width: 30upx;
    height: 3upx;
    margin: 0 auto;
    background-color: red;
}

.list {
    width: 710upx;
    margin: 0 auto;
}
.list-box {
    width: 710upx;
    height: 160upx;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
}
.list-box-o {
    flex: 1;
}
.list-box-tx {
    width: 88upx;
    height: 88upx;
    margin-top: 36upx;
}
.list-box-info {
    flex:4;
}
.list-info-name {
    margin-top: 40upx;
    color: #000000;
    font-size: 32upx;
}
.list-info-identity {
    color: #666666;
    font-size: 28upx;
}
.list-box-gz {
    flex:1.5;
    width: 132upx;
    height: 48upx;
    border-radius: 24upx;
    border:1px solid #f4f4f4;
    text-align: center;
    line-height: 48upx;
    margin-top: 58upx;
    color:#666666;
    font-size: 22upx;
}


</style>





